<!--
 * @description  : 零售户维护
 * @descriptionDetail: 零售户维护
 * @author       : bln
 * @create       : 2024-05-29 00:00:00
-->
<template>
  <view class="u-p-b-10">
    <!-- #ifdef H5-ONLY -->
    <theme-navbar :is-white="true" :borderBottom="false" title="零售户画像详情" :custom-back="goBack"></theme-navbar>
    <!-- #endif -->
    <view class="top">
      <u-swiper img-mode="scaleToFill" :list="imgList" :effect3d="false" mode="rect"></u-swiper>
      <view class="title">
        <span class="u-flex">
          <img src="@/static/check/retailer.png" class="retailer" />
          <b>{{ baseInfo.licNo }}</b>
          <u-tag v-if="baseInfo.bizFormatName" :text="baseInfo.bizFormatName" bg-color="#DDE7FF" color="#165DFF" />
          <u-tag v-if="baseInfo.licStatusName" :text="baseInfo.licStatusName" bg-color="#38BE35" color="#FFF" />
        </span>
        <img v-if="baseInfo.creditLevel" :src="require(`@/static/check/level${baseInfo.creditLevel || 'A'}.png`)" alt="creditLevel" class="creditLevel" />
      </view>
      <view class="info">
        <p><span>企业名称：</span><b>{{ baseInfo.companyName}}</b></p>
        <p><span>经营地址：</span><b>{{ baseInfo.businessAddr}}</b></p>
        <p><span>联系电话：</span><b>{{ baseInfo.retailTel}}</b></p>
        <p><span>许可证有效期：</span><b>{{ baseInfo.validateStart }} 至 {{ baseInfo.validateEnd }}</b></p>
      </view>
    </view>
    <u-gap height="24" bg-color="#F4F4F4" />
    <view class="bottom">
      <u-tabs :list="tabList" :is-scroll="false" :show-bar="false" :current="current" @change="tabChange" />
      <view v-show="current == 0">
        <view id="myMap" style="height: 400rpx;"></view>
        <view class="tagInfo" v-for="rule, rIndex in licTagList.groupRuleData" :key="rIndex">
          <view class="tagTitle">
            <span class="ruleName u-flex"><img src="@/static/check/tag_title.png" />{{ rule.ruleName }}</span>
            <span class="extra u-flex" v-if="rule.groupData.some(v => v.tagData.some(t => t.isCurrentMonth === '1'))"><img src="@/static/check/circle.png" />当月新增</span>
          </view>
          <view class="tagList">
            <view class="group" v-for="group, gIndex of rule.groupData" :key="gIndex">
              <p v-if="group.groupName">{{ group.groupName }}</p>
              <view v-for="tag, tIndex of group.tagData" :key="tIndex" :class="[tag.isCurrentMonth === '1' ? 'tag bg_select' : 'tag']">
                <img src="@/static/check/tag_icon.png" />
                {{ getTagNames(tag) }}
              </view>
            </view>
          </view>
        </view>
      </view>
      <view v-show="current == 1">
        <view class="timeline">
          <u-time-line>
            <u-time-line-item v-for="time, index in timeLineData" :key="index" nodeTop="2">
              <template v-slot:node>
                <view class="u-node">
                  <u-image v-if="time.licContent" src="@/static/check/ring.png" width="20rpx" height="20rpx"></u-image>
                  <u-image v-if="time.caseContent" src="@/static/check/case.png" width="28rpx" height="28rpx"></u-image>
                  <u-image v-if="time.checkContent" src="@/static/check/check.png" width="28rpx" height="28rpx"></u-image>
                </view>
              </template>
              <template v-slot:content>
                <view>
                  <view class="u-order-time" style="fontSize: 32rpx;">{{ time.date }}</view>
                  <view v-if="time.licContent" class="u-order-desc" style="color: rgba(0,0,0,0.45);fontSize: 28rpx;">{{ time.licContent }}</view>
                  <view v-if="time.caseContent" class="u-order-desc">{{ time.caseContent }}</view>
                  <view v-if="time.checkContent" class="u-order-desc">{{ time.checkContent }}</view>
                </view>
              </template>
            </u-time-line-item>
          </u-time-line>
        </view>
      </view>
      <view v-show="current == 2">
        <view id="relationGraph" style="width: 100%; height: 400px;"></view>
      </view>
      <view v-show="current == 3">
        <view class="tagRecord">
          <h3>零售户标签历史</h3>
          <me-table :i="0" :top="108" :index="0" :load-data="loadRecordData" :init-load="false" ref="mescrollItem0">
            <template #default="d">
              <view class="record_list">
                <u-row>
                  <u-col span="9.5">
                    <view class="record_title">{{ d.data.tagName }}</view>
                    <u-row gutter="16" align="top" class="rowde">
                      <u-col span="4">
                        <view>
                          操作人: {{ d.data.creatorName || "/" }}
                        </view>
                      </u-col>
                      <u-col span="8">
                        <view>
                          操作时间: {{ d.data.sysCreateTime || "/" }}
                        </view>
                      </u-col>
                    </u-row>
                  </u-col>
                  <u-col span="2.5">
                    <view class="record_oprate">
                      <u-tag v-if="d.data.optTypeName" class="u-m-r-10" :text="d.data.optTypeName" :bg-color="oprateTypeColor[d.data.optType]" color="#FFF" />
                      <u-tag v-if="d.data.changeWayName" :text="d.data.changeWayName" :bg-color="tagTypeColor[d.data.changeWay]" color="#FFF" />
                    </view>
                </u-col>
                </u-row>
              </view>
            </template>
          </me-table>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import * as echarts from 'echarts'
import MeTable from '@/components/me-table.vue'
import { AMapMixin } from '@/common/AMapMixin.js'
import positionIcon from '@/static/check/position.png'
import checkService from '@/service/check/check.service'
import commonService from '@/service/eCigar/common.service'
import certificateService from '@/service/certificate/certificate.service.js'
import MescrollMoreMixin from '@/components/mescroll-uni/mixins/mescroll-more.js'

export default {
  components: { MeTable },
  mixins: [AMapMixin, MescrollMoreMixin],
  data() {
    return {
      current: 0,
      imgList: [],
      tabList: [
        { name: '零售户标签' }, 
        { name: '许可证生命周期' },
        { name: '关系图谱' },
        { name: '标签记录' }
      ],
      retailerUuid: '',
      tagRecords: [], // 标签记录
      baseInfo: {}, // 零售户基本信息
      licTagList: {}, // 零售户标签数据
      timeLineData: [], // 时间轴数据
      relationList: {}, // 关系图谱数据
      oprateTypeColor: {
        insert: 'dodgerblue',
        update: 'orange',
        delete: 'red'
      },
      tagTypeColor: {
        system: 'darkgray',
        I: 'rgb(56, 190, 53)'
      }
    }
  },
  onLoad() {
    this.retailerUuid = this.getRouteParam().retailerUuid
  },
  mounted() {
    this.queryImgs()
    this.getPhotoInfo()
  },
  methods: {
    initAmap() {},
    // 切换选中项
    tabChange(index) {
      this.current = index
      if(index === 2) {
        this.$nextTick(() => {
          this.initRelationGraph()
        })
      }
    },
    // 获取标签信息
    getTagNames(tag) {
      if(tag.tagType === '01') {
        return tag.tagName
      } else if(tag.tagType === '02') {
        return `${tag.tagName}: ${tag.valName || ''}`
      } else {
        return `${tag.tagName}: ${tag.val || ''}`
      }
    },
    // 查询展示的零售户照片
    queryImgs() {
      let zmRoot = `${commonService.baseUrl}/commonfile/filestore/downloadFile.do?tk=${uni.getStorageSync("tk")}&fileId=`;
      certificateService.detail(this.retailerUuid).then(dr => {
        // 零售户照片
        if (dr.success) {
          let reta = dr.bean || {};
          reta.storeImageUuid && this.imgList.push({ image: zmRoot + reta.storeImageUuid })
          reta.counterImageUuid && this.imgList.push({ image: zmRoot + reta.counterImageUuid })
          reta.custImageUuid && this.imgList.push({ image: zmRoot + reta.custImageUuid })
          reta.liceImageUuid && this.imgList.push({ image: zmRoot + reta.liceImageUuid })
          reta.backCounterImageUuid && this.imgList.push({ image: zmRoot + reta.backCounterImageUuid })
        }
        // 如果没有照片，显示一个无照片
        if (this.imgList.length === 0) {
          this.imgList.push({ image: require('@/static/check/nophoto.png' )})
        }
      }).catch(err => {
        if (this.imgList.length === 0) {
          this.imgList.push({ image: require('@/static/noImg.png') })
        }
      })
    },
    // 初始化地图
    initMap() {
      const { longitude = 114.587457, latitude = 38.128874 } = this.licTagList
      this.map = new AMap.Map('myMap', {
        zoom: 13,
        resizeEnable: true,
        center: longitude && latitude ? [longitude, latitude] : this.center
      })
      this.addMarker()
    },
    // 添加零售户标记
    addMarker() {
      const { longitude = 114.587457, latitude = 38.128874, companyName, managerName, businessAddr } = this.licTagList
      if (longitude && latitude) {
        // 添加零售户信息
        const marker = new AMap.Marker({
          icon: positionIcon,
          offset: new AMap.Pixel(-12, -12),
          position: [114.587457, 38.128874]
        })
        marker.setLabel({
          direction: 'top',
          content: `
            <div class='retailerInfo'>
              <p class='line1'><span class='name'>${managerName}</span><span class="sub">${companyName}</span></p>
              <p class="sub">${businessAddr}</p>
            </div>`,
        })
        marker.setMap(this.map)
      }
    },
    // 初始化关系图谱
    initRelationGraph() {
      const myChart = echarts.init(document.getElementById('relationGraph'))
      const tags = this.relationList.relationTagTypeData.map(item => {
        const obj = {
          name: item.relationTagType,
          symbolSize: 50,
          label: { fontSize: 11 },
          itemStyle: { color: '#DFE9FF' }
        }
        obj.children = item.infoContents.map(info => {
          return {
            name: info,
            symbolSize: 40,
            label: { fontSize: 10, color: '#165DFF' },
            lineStyle: { type: 'dashed' },
            itemStyle: {
              color: {
                x: 0.5,
                y: 0.5,
                r: 0.8,
                type: 'radial',
                colorStops: [
                  { offset: 0, color: '#fff' },
                  { offset: 1, color: '#6796ff' }
                ]
              }
            }
          }
        })
        return obj
      })
      myChart.setOption({
        series: [
          {
            left: 0,
            right: 0,
            top: 0,
            bottom: 50,
            type: 'tree',
            symbol: 'circle',
            layout: 'radial',
            hoverAnimation: false,
            focusNodeAdjacency: true,
            roam: true, //是否开启鼠标缩放和平移漫游
            nodePadding: [0, 100], // 20,nodePadding的数组值为[10, 20]，表示第一层节点与第二层节点之间的水平间距为10，垂直间距为20。
            label: { // 节点内文字标签
              rotate: 0,
              position: 'inside',
              formatter: function(params) {
                let lines = []
                for (let i = 0; i < Math.ceil(params.name.length / 3); i++) {
                  lines.push(params.name.substr(i * 3, 3))
                }
                return lines.join('\n')
              }
            },
            // 线样式
            lineStyle: {
              width: 1,
              curveness: 0,
              color: '#165DFF'
            },
            data: [
              {
                name: this.relationList.companyName,
                symbol: 'roundRect',
                symbolSize: 60,
                label: { fontSize: 14 },
                itemStyle: { color: '#165DFF' },
                children: tags
              }
            ]
          }
        ]
      })
    },
    // 获取标签记录
    loadRecordData(page) {
      return checkService.getTagRecord({
        page: page.num,
        limit: page.size,
        retailerUuid: this.retailerUuid
      })
    },
    // 获取零售户信息
    getPhotoInfo() {
      this.$u.loading('查询中...')
      checkService.getRetailerPhoto({ retailerUuid: this.retailerUuid }).then(res => {
        this.$u.hideLoading()
        if (res.success) {
          this.baseInfo = res.bean
          this.licTagList = res.bean.licTagList
          this.timeLineData = res.bean.timeLineData
          this.relationList = res.bean.licTagRelationList
          this.initMap()
        }
      }).catch(err => {
        this.$u.hideLoading()
        this.$u.toast(err)
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.top {
  padding: 30rpx;
  .title {
    display: flex;
    align-items: center;
    margin-bottom: 20rpx;
    justify-content: space-between;
    b {
      font-size: 32rpx;
    }
  }
  .creditLevel {
    width: 100rpx;
    height: 100rpx;
  }
  .retailer {
    width: 60rpx;
    height: 60rpx;
    padding-top: 10rpx;
  }
  .u-tag {
    margin-left: 10rpx;
  }
  .info {
    margin-left: 20rpx;
    p {
      &:not(:last-child) {
        margin-bottom: 20rpx;
      }
      span {
        color: #86909C;
      }
      b {
        color: #4E5969;
      }
    }
  }
}
.bottom {
  .tagInfo {
    border-radius: 16rpx;
    border: 1px solid #F0F5FF;
    margin: 20rpx 30rpx;
    .tagTitle {
      width: 100%;
      display: flex;
      align-items: center;
      padding: 12rpx 24rpx;
      justify-content: space-between;
      background-color: #F0F5FF;
      border-top-left-radius: 16rpx;
      border-top-right-radius: 16rpx;
      .ruleName {
        font-size: 28rpx;
        font-weight: 700;
      }
      .extra {
        font-size: 24rpx;
        color: rgba(0, 0, 0, 0.45);
        img {
          width: 16rpx;
          height: 16rpx;
        }
      }
      img {
        margin-right: 10rpx;
      }
    }
    .tagList {
      color: #4E5969;
      padding: 16rpx 24rpx;
      background-color: #fff;
      border-bottom-left-radius: 16rpx;
      border-bottom-right-radius: 16rpx;
    }
    p {
      margin: 0;
    }
    .tag {
      height: 32px;
      font-size: 24rpx;
      width: fit-content;
      position: relative;
      border-radius: 6rpx;
      display: inline-flex;
      align-items: center;
      background-color: #fff;
      margin: 10rpx 30rpx 10rpx 44rpx;
      padding: 12rpx 30rpx 12rpx 10rpx;
      box-shadow: 1px 1px 0px 1px #B1C2E8;
      &::after {
        z-index: 1;
        content: '';
        position: absolute;
        left: -20rpx;
        top: 10rpx;
        width: 0;
        height: 0px;
        border-style: solid;
        border-width: 22rpx;
        transform: rotate(-135deg);
        box-shadow: 0px -2px 0px #B1C2E8;
        border-color: #fff #fff transparent transparent;
      }
      img {
        margin-right: 10rpx;
      }
    }
    .bg_select {
      color: #fff;
      box-shadow: none;
      background-color: #165DFF;
      &::after {
        box-shadow: none;
        border-color: #165DFF #165DFF transparent transparent;
      }
    }
  }
  .timeline {
    padding: 9px 9px 9px 16px;
  }
  .tagRecord {
    padding: 10rpx 20rpx 20rpx 20rpx;
    .record_list {
      padding: 20rpx 0;
      border-bottom: 1px solid #e8e8e8;
    }
    .record_title {
      font-weight: 700;
      margin-bottom: 16rpx;
    }
    .rowde {
      font-size: 24rpx;
      color: rgba(0, 0, 0, 0.45);
    }
    .u-col {
      padding: 0!important;
    }
    .u-tag {
      border: none;
      padding: 12rpx!important;
    }
  }
}
// 地图相关样式
/deep/ .amap-marker-label {
  border: none;
  width: 500rpx;
  padding: 24rpx;
  border-radius: 16rpx;
  background-color: #fff;
  .retailerInfo {
    width: 100%;
    p {
      margin-bottom: 0px;
      white-space: break-spaces;
    }
    .line1 {
      font-size: 32rpx;
      margin-bottom: 36rpx;
      .name {
        font-weight: 700;
        margin-right: 20rpx;
      }
    }
    .sub {
      color: #4E5969;
    }
  }
}
.mescroll-body {
  padding-top: 0px!important;
}
/deep/ .u-tab-item {
  padding: 0 10rpx!important;
  &:nth-child(2) {
    flex: 1 1 12%!important;
  }
}
</style>
